<template>
	<!-- 售后状态组件 -->
	<view class="zong">
	<view>
		<view class="shlx"><text class="shlx1">售后类型:</text><view  class="huanhuo">
			<input type="text" value="" />
		</view></view>
	</view>
	<view>
		<view class="shlx2"><text class="shlx1">售后理由:</text><view  class="huanhuo">
			<input type="text" value="" />
		</view></view>
	</view>
	<view>
		<view class="shlx2"><text class="shlx1">申请描述:</text><view  class="huanhuo">
		</view>
		</view>
		<input class="ms" type="text" value="" />
	</view>
	<!-- 上传凭证按钮 -->
	<view class="aa">
		<view>申请凭证:</view>
			<view class="example-body">
							<uni-file-picker limit="3" title=""></uni-file-picker>
						</view>
			<view></view>
		<view class="sqan">
			<button @click="open">取消申请</button>
			<button>修改申请</button>
		</view>
		<!-- 售后流程步骤条 -->
			<view class="shlc">
				<text>售后流程</text>
			</view>
				
			<view class="">
				<uni-section title="纵向排列" type="line" padding>
					<uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
				</uni-section>
			</view>
	</view>
		</view>
</template>

<script>
	import store from '@/store/index.js'
	import { mapState, mapActions,mapGetters } from "vuex"
	import http from '../../until/http.js'
	import date from '../../static/time.js' 
	export default {
			data() {
				return {
					imageValue:[],
					list:[]
				}
			},
			onLoad() {
				this.getlist()
			},
			methods:{
				// 获取售后的状态
				getlist(){
					http({
						url:'/getshsq',
						method:'get',
					}).then((res)=>{
						// 导出数据数据格式改变
						res.data.data.filter((v) => { 
						    v.desc=date.dateFn(v.desc);
						});
						this.list=res.data.data
						console.log(this.list)
					})
				},
				// 弹框
				open(){
					uni.showModal({
						content: '确定要取消售后申请吗？',
						success: function (res) {
							if (res.confirm) {
								// 用户点击确定取消这条订单，并在订单列表删除
								console.log('用户点击确定');
								uni.navigateTo({//跳转页面
									url:"./Personal_center"
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
				// 获取上传状态
				select(e){
					console.log('选择文件：',e)
				},
				// 获取上传进度
				progress(e){
					console.log('上传进度：',e)
				},
				// 上传成功
				success(e){
					console.log('上传成功')
				},
				
				// 上传失败
				fail(e){
					console.log('上传失败：',e)
				}
			}
		}
</script>

<style lang="less" scoped>
	.sqpz{
		width:750rpx;
		height: 200rpx;
		display: flex;
		margin-top: 20px;
	}
	.sqan{
		height: 50rpx;
		width: 100%;
		display: flex;
		button{
			width: 20%;
			font-size: 10px;
		}
	}
	.shlc{
		height: 50rpx;
		font-size: 10px;
		background-color: rgb(250,250,250);
		margin-top: 20px;
		text{
			height: 50rpx;
			line-height: 50rpx;
		}
		
	}
	.zong{
		font-size: 12px;
		padding: 10px;
	}
	.aa{
		margin-top: 20px;
	}
	.shlx{
		display: flex;
		 align-items:center;
		.sglx1{
			flex: 3;
			height: 100%;
		}
		huanhuo{
			flex: 7;
			height: 100%;
			input{
				font-size: 10px;
			}
		}
	}
	.shlx2{
		display: flex;
		 align-items:center;
		 margin-top: 20rpx;
		.sglx1{
			flex: 3;
			height: 100%;
		}
		huanhuo{
			flex: 7;
			height: 100%;
			input{
				font-size: 10px;
			}
		}
	}
	.ms{
		width: 100%;
	}
.example-body {
		padding: 10px;
		padding-top: 0;
		margin-top: 20rpx;
	}
</style>
